<template>
<div>
    <div class="center">
        <div class="top">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>首页</el-breadcrumb-item>
                <el-breadcrumb-item v-for="(item,index) in this.$route.meta" :key="index">{{item}}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="lunbo">
            <el-carousel indicator-position="outside" class="content" height="450px">
                <el-carousel-item v-for="(item,index) in arrs" :key="index">
                <div>
                    <img :src="item.url" alt="">
                </div>
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="category" v-if="cate">
            <h1>全部分类</h1>
            <ul>
                <li v-for="(item,index) in cate" :key="index">
                    <img :src="item.url" alt="">
                    <p>{{item.text}}</p>
                </li>
            </ul>
        </div>
        <div class="xing" v-if="xing">
            <h1>-形有形-</h1>
            <p>温暖柔软，品质之选</p>
            <ul>
                <li v-for="(item,index) in xing" :key="index">
                    <img :src="item.url" alt="">
                    <p class="text">{{item.text}}</p>
                    <p class="title">{{item.title}}</p>
                    <p class="price">￥{{item.price}}</p>
                </li>
            </ul>
        </div>
        <div class="xing" v-if="xing">
            <h1>-议话-</h1>
            <p>温暖柔软，品质之选</p>
            <ul>
                <li v-for="(item,index) in xing" :key="index">
                    <img :src="item.url" alt="">
                    <p class="text">{{item.text}}</p>
                    <p class="title">{{item.title}}</p>
                    <p class="price">￥{{item.price}}</p>
                </li>
            </ul>
        </div>
        <div class="xing" v-if="xing">
            <h1>-机县-</h1>
            <p>温暖柔软，品质之选</p>
            <ul>
                <li v-for="(item,index) in xing" :key="index">
                    <img :src="item.url" alt="">
                    <p class="text">{{item.text}}</p>
                    <p class="title">{{item.title}}</p>
                    <p class="price">￥{{item.price}}</p>
                </li>
            </ul>
        </div>
        <div class="xing" v-if="xing">
            <h1>-你放-</h1>
            <p>温暖柔软，品质之选</p>
            <ul>
                <li v-for="(item,index) in xing" :key="index">
                    <img :src="item.url" alt="">
                    <p class="text">{{item.text}}</p>
                    <p class="title">{{item.title}}</p>
                    <p class="price">￥{{item.price}}</p>
                </li>
            </ul>
        </div>
        <div class="xing" v-if="xing">
            <h1>-几档-</h1>
            <p>温暖柔软，品质之选</p>
            <ul>
                <li v-for="(item,index) in xing" :key="index">
                    <img :src="item.url" alt="">
                    <p class="text">{{item.text}}</p>
                    <p class="title">{{item.title}}</p>
                    <p class="price">￥{{item.price}}</p>
                </li>
            </ul>
        </div>
    </div>
   <!-- 底部 -->
    <div class="bottom">
        <div class="center">
            <div>
                <h3>客户服务</h3>
                <ul>
                    <li>
                        <img src="../../assets/4.png" alt="">
                    </li>
                    <li>
                        <img src="../../assets/4.png" alt="">
                    </li>
                </ul>
            </div>
            <div>
                <h3>关注我们</h3>
                <ul>
                    <li>
                        <img src="../../assets/4.png" alt="">
                    </li>
                    <li>
                        <img src="../../assets/4.png" alt="">
                    </li>
                </ul>
            </div>
            <div>
                <h3>下载APP</h3>
                <ul>
                    <li>
                        <img src="../../assets/1.png" alt="">
                        <p>在线客服</p>
                    </li>
                    <li>
                        <p>立即扫码下载app</p>
                        <p>下载页面</p>
                    </li>
                </ul>
            </div>
            <div>
                <h3>服务热线</h3>
                <ul>
                    <li>
                        <h3>400-826-8654</h3>
                        <p>周一至周日8:00-12:00</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="bottom1">
            <dl>
                <dd>
                    <h1>价格亲民</h1>
                </dd>
                <dd>
                    <h1>物流快捷</h1>
                </dd>
                <dd>
                    <h1>品质新鲜</h1>
                </dd>
            </dl>
            <div class="bottom1center"></div>
            <div class="bottom2">
                <div>关于我们</div>
                <div>关于我们</div>
                <div>关于我们</div>
                <div>关于我们</div>
                <div>关于我们</div>
                <div>关于我们</div>
            </div>
            <div class="bottom3">
                CopyRight◎小兔鲜儿
            </div>
        </div>
    </div>
</div>
</template>

<script>
    import instance from "../../api/index"
    export default ({
        name: "foods",
        data(){
           return {
                arrs:null,
                cate:null,
                xing:null
           }
        },
         methods: {
            get(){//获取行为 
                this.getcan()
                this.getcate()
                this.getxing()
            },
            async getcan() { //获取业务 轮播图
                let {data} = await instance.get('/home')
                // console.log(data)
                this.arrs = data
            },
            async getcate(){//获取业务 全部分类
                let index = 1
                let {data} = await instance.get('/home/'+index)
                console.log(data)
                this.cate = data
                
            },
            async getxing(){//获取业务 全部分类
                let index = 2
                let {data} = await instance.get('/home/'+index)
                console.log(data)
                this.xing = data
                
            }
        },
        created(){
            this.get()
        }
    })
</script>
<style scoped>
@import url("//unpkg.com/element-ui@2.15.7/lib/theme-chalk/index.css");
    li {
        list-style:none;
    }
    .center {
        width:60vw;
        margin:0 auto;
    } 
    .center .top {
        margin:33px 0;
    }
    .content {
        width:1200px;
        height:500px;
        margin:0 auto;
        text-align:center;
    }
    .el-carousel__item img {
        width:100%;
        line-height:300px;
        height:100%;
    }
    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }
    
    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
    .lunbo div {
        background-color:yellow;
        width:100%;
        height:500px;
    }
    /* 分类 */
    .category {
        height:480px;
        width: 100%;
        background-color:#fff;
        margin-top:17px;
        box-sizing:border-box;
        padding:30px 60px;
    }
    .category h1 {
        width:120px;
        margin:0 auto;
        font-size:28px;
    }
    .category ul {
        display:flex;
        flex-wrap:wrap;
    }
    .category li {
        width:13%;
        height:140px;
        margin:20px 10px;
        text-align:center;

    }
    .category li:hover p{
        color:green;
    }
    .category img {
        width:100%;
        height:130px;
    }
    /* 形有形 */
    .xing {
        height:400px;
        width: 100%;
        background-color:#fff;
        margin-top:17px;
        box-sizing:border-box;
        padding:30px 60px;
    }
    .xing h1 {
        width:120px;
        margin:0 auto;
        font-size:28px;
    }
    .xing h1+p {
        width:160px;
        margin:20px auto;
        color:#ccc;
    }
    .xing ul {
        display:flex;
        flex-wrap:wrap;
    }
    .xing li {
        width:17%;
        height:240px;
        margin:20px 10px;
        text-align:center;
    }
    .xing li:hover {
        transition:all 0.5s;
        transform:translateY(-10px);
        box-shadow: 0 2px 16px #ccc, 0 0 1px #ccc, 0 0 1px #ccc; 
    }
    .xing img {
        width:100%;
        height:130px;
    }
    .xing .text {
        white-space: nowrap; 
        width: 140px; 
        overflow: hidden;
        text-overflow:ellipsis;
    }
    .xing .title {
        font-size:16px;
        color:#ccc;
    }
    .xing .price {
        color:red;
    }
    /* 底部 */
    .bottom {
        width:98vw;
        height:300px;
        margin-top:20px;
        background-color:#fff;
        box-sizing:border-box;
        padding:20px 0;
    }
    .bottom .center {
        display:flex;
        justify-content:space-around;
    }
    .bottom ul {
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding:0;
    }
    .bottom ul li {
        width:100px;
        height:120px;
        text-align:center;
    }
    .bottom ul li img {
        width:90px;
        height:100px;
    }
    .bottom ul li p {
        margin-top:-5px;
    }
    .bottom .center div {
        width:200px;
        height:200px;
        text-align:center;
        border-right:1px solid #ccc;
        padding-right:50px;
    }
    .bottom .center h3 {
        color:#ccc;
        font-weight:normal;
    }
    .bottom .center div:nth-child(3) li:nth-child(2) {
        box-sizing:border-box;
        padding:20px 0;
    }
    .bottom .center div:last-child  li {
        width:100%;
    }
    .bottom .bottom1 {
        width:98vw;
        height:300px;
        background-color:#000;
        box-sizing:border-box;
        padding:30px 0;
    }
    .bottom .bottom1 dl {
        display:flex;
        justify-content:space-around;
        width:60vw;
        margin:0 auto;
        color:#fff;
    }
    .bottom .bottom1 .bottom1center {
        width:60vw;
        height:10px;
        margin:20px auto;
        border-bottom:1px solid #ccc;
    }
    .bottom .bottom1 .bottom2 {
        width:60vw;
        margin:10px auto;
        display:flex;
        justify-content:center;
        color:#ccc;
    }
    .bottom .bottom1 .bottom2 div {
        margin:10px 10px;
    }
    .bottom .bottom3 {
        width:60vw;
        margin:10px auto;
        color:#ccc;
        text-align:center;
    }
</style>